#什么是 Oklab/Oklch

#Oklab

一种新的颜色模型，目标是让颜色的亮度、色相、饱和度更符合人眼感知。例如，调整亮度时，颜色不会“变脏”

• OK：代表颜色空间的“感知均匀性”
• L：亮度，符合人眼对明暗的感知
• a/b：色度坐标轴，用于定义颜色偏向红绿或黄蓝

用亮度（L）+ 两个色度轴（a,b）定义颜色，适合程序员和数学计算

#Oklch

Oklab 的极坐标版本，用 亮度（L）、色度（C）、色相（H） 三个参数表示颜色，类似 HSL 但更科学

• OK：同上
• L：亮度（Lightness）
• C：色度（Chroma），颜色的鲜艳程度
• H：色相（Hue），颜色的基本类型，如红、蓝、绿

用亮度（L）+ 色度（C）+ 色相（H）定义颜色，适合设计师直观调色

#和 RGBA 的区别

#亮度、色度和色相

#亮度（Lightness）

颜色的明暗程度，从纯黑到纯白之间的过渡

在 RGB/HSL 中：亮度调整可能导致颜色失真（例如调高亮度时，红色可能变成粉色）。

在 Oklab/Oklch 中：亮度基于人眼感知，调整时颜色更自然（例如红色调亮时更接近真实的“浅红色”，而非粉色）。

#色度（Chroma）

颜色的鲜艳程度，数值越高越鲜艳，越低越接近灰色

使用 CSS 表示

color: oklch(70% 0.3 120); /* 高色度 -> 鲜艳绿色 🟢 */
color: oklch(70% 0.1 120); /* 低色度 -> 灰绿色 */
color: oklch(70% 0   120); /* 色度 0 -> 灰色 */

#色相（Hue）

颜色的类型，比如红、蓝、绿，就像彩虹🌈的颜色顺序

可以想象为 360° 圆形色环，每个角度对应一种颜色，0° 红色 -> 120° 蓝色 -> 240° 绿色 -> 360° 红色

使用 CSS 表示

color: oklch(70% 0.2 0); /* 0° = red 🔴 */
color: oklch(70% 0.2 120); /* 120° = blue 🔵 */
color: oklch(70% 0.2 240); /* 240° = green 🟢 */